<template>
  <Transition name="slide-fade">
    <router-view></router-view>
  </Transition>
</template>

<script setup>
//import {useRouter, useRoute} from 'vue-router'
//// 在 setup 中，获取 this.$route 和 this.$router
//const route = useRoute() // 获取具体的路由（路线）
//const router = useRouter() // 整个路由器 对象
//
//watchEffect(() => {
//  console.log('route 路由变化了', route) // 如果不使用 route.path 则不会触发 事件
//  // 因为打印了route.path， 因此监听到了 对象数据变化，就会触发
//  console.log('route 路由变化了', route.path)
//})
</script>

<style>
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>
